<template>
    <el-dialog :model-value="props.isShow" :title="props.isAdd ? '添加菜单' : '编辑菜单'" :before-close="close">
        <el-form :model="form" :rules="rules" ref="menuRef">
            <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="title">
                <el-input v-model="form.title" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="上级菜单" :label-width="formLabelWidth" prop="pid">
                <el-select v-model="form.pid" placeholder="请选择上级菜单">
                    <el-option label="顶级菜单" :value="0"></el-option>

                    <el-option v-for="item in menus" :key="item.id" :label="item.title" :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="菜单类型" :label-width="formLabelWidth">
                <el-radio v-model="form.type" :label="1">目录</el-radio>
                <el-radio v-model="form.type" :label="2">菜单</el-radio>
            </el-form-item>

            <el-form-item label="菜单图标" :label-width="formLabelWidth" v-show="form.type === 1">
                <el-select v-model="form.icon" placeholder="请选择菜单图标">
                    <el-option v-for="item in iconList" :key="item" :label="item" :value="item"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="菜单地址" :label-width="formLabelWidth" v-show="form.type === 2">
                <el-select v-model="form.url" placeholder="请选择菜单地址">
                    <el-option v-for="item in urlList" :key="item" :label="item" :value="item"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="状态" :label-width="formLabelWidth">
                <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ccc" :active-value="1"
                    :inactive-value="2">
                </el-switch>
            </el-form-item>

        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel(menuRef)">取消</el-button>
                <el-button type="primary" @click="confirm(menuRef)">确 定</el-button>

            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, toRefs, defineProps, defineEmits, defineExpose, ref, computed } from "vue";
import type { FormInstance, FormRules } from 'element-plus'
import { menuAdd, menuOne, menuUpdate } from '../../request/api'
import { useStore, mapGetters } from "vuex";
import { ElMessage } from "element-plus";
//定义父子组件接收
let props = defineProps({
    isShow: Boolean,
    isAdd: Boolean
})

//定义子传父
let emits = defineEmits(['cancel'])
let menuRef = ref<FormInstance>()
let typeId = 0
interface RuleForm {
    title: string,
    pid: number,
    icon: string,
    type: number,
    url: string,
    status: number
}

const rules = reactive<FormRules<RuleForm>>({
    title: [
        { required: true, message: '请输入菜单名称', trigger: 'blur' },
        { min: 2, max: 8, message: '字符串长度是2到8', trigger: 'blur' },
    ],
    pid: [
        {
            required: true,
            message: '请输入上级菜单',
            trigger: 'change',
        },
    ],
})


const store = useStore();
// console.log(store);

const [menus] = Object.values(mapGetters('menu', ['getMenu'])).map(fn => computed(fn.bind({ $store: store })));




let form = ref({
    title: '',   //标题
    pid: 0,   //上级分类编号
    icon: '',   //图标
    type: 1,   //类型1目录2菜单
    url: '',  ////菜单地址
    status: 1,  //状态1正常2禁用
})

const formLabelWidth = "140px";

const iconList = ['el-icon-setting', 'el-icon-message-solid', 'el-icon-s-promotion'];  //图标

const urlList = ['menu', 'role', 'member', 'cate', 'specs', 'goods', 'user', 'banner', 'seckill'];  //菜单地址


//取消弹窗
const cancel = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    emits('cancel', false)
    form.value = {
        title: '',   //标题
        pid: 0,   //上级分类编号
        icon: '',   //图标
        type: 1,   //类型1目录2菜单
        url: '',  ////菜单地址
        status: 1,  //状态1正常2禁用
    }
    //清空规则验证
    formEl.resetFields()
}
//对勾
const close = (done: any) => {
    done;
    cancel(menuRef.value)
}


//添加
const confirm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((val) => {
        // console.log(val);
        if (val) {
            // console.log(form.value);
            if (props.isAdd) {
                menuAdd(form.value).then((res: any) => {
                    // console.log(res);
                    if (res.code == 200) {
                        cancel(menuRef.value)
                        store.dispatch('menu/listActions')
                        ElMessage.success(res.msg)
                    } else {
                        ElMessage.error(res.msg)
                    }
                })
            } else {
                // 调用编辑接口
                menuUpdate({ ...form.value, id: typeId }).then((res: any) => {
                    if (res.code === 200) {
                        cancel(menuRef.value)
                        store.dispatch('menu/listActions')
                        ElMessage.success(res.msg)
                    } else {
                        ElMessage.error(res.msg)
                    }
                })
            }
        }
    }).catch(err => {
        console.log(err);

    })
}

//回显
const getDetail = (id: any) => {
    // console.log(id);
    typeId = id
    menuOne({ id }).then((res: any) => {
        // console.log(res);
        if (res.code === 200) {
            form.value = res.list
        }
    })

}

defineExpose({
    getDetail
})



</script>

<style></style>